<template>
    <div class="failure">
        <div class="left">
            <div class="infos">
                <div class="searchHeader">
                    <div class="header-left">
                         <el-button type="primary" @click="alarmRemoveData">删除</el-button>
                         <el-button type="primary" @click="dataList(1)">刷新</el-button>
                    </div>
                    <div class="header-right">
                        <el-input placeholder="请输入内容" v-model="searchInput">
                            <el-button slot="append" icon="el-icon-search" @click="getSubmin"></el-button>
                        </el-input>
                    </div>
                </div>
                <div class="top_border"></div>
                <!-- <div class="item btnTitle">
                    <p style="width:140px;text-align:center">触发时间</p>
                    <p style="flex:1;text-align:center">故障内容</p>
                    <p style="width:100px;text-align:center">事件类型</p>
                    <p style="width:120px;text-align:center">诊断状态</p>
                    <p style="width:210px;text-align:center">操作</p>
                </div> -->
                <div class="list top" style="padding-top:40px" v-if="false">
                    
                    <div v-for="(item,index) in monitorList" :key="index" class="item">
                        <p style="width:140px;text-align:center">{{getTime(item.create_date)}}</p>
                    <!-- <div v-for="(item,index) in 20" :key="index" class="item">
                        <p style="width:140px;text-align:center">2021-12-12 12:12:12</p> -->
                        <p style="flex:1;text-align:center;overflow: hidden;">{{item.title}}</p>
                        <p style="width:120px;text-align:center;">{{item.type === 'warning' ? '报警' : '状态'}}</p>
                        <p style="width:100px;text-align:center;">{{item.confirm ? '已确认' : '未确认'}}</p>
                        <p style="width:210px;text-align:center">
                            <el-button type="primary" size="mini" @click="advice(item)">诊断报告</el-button>
                            <el-button type="primary" size="mini" icon="el-icon-warning-outline" @click="callPolice(item)">确认诊断</el-button>
                        </p>
                    </div>
                </div>
                <div class="list top">
                    <el-table ref="multipleTable" :data="monitorList" tooltip-effect="dark" style="width: 100%" height="675" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="触发时间" width="165">
                            <template slot-scope="scope">{{ getTimes(scope.row.create_date) }}</template>
                        </el-table-column>
                        <el-table-column prop="title" label="故障内容"></el-table-column>
                        <el-table-column label="事件类型" width="120">
                            <template slot-scope="scope">{{ scope.row.type === 'warning' ? '报警' : '状态' }}</template>
                        </el-table-column>
                        <el-table-column prop="confirm" label="诊断状态" sortable width="120">
                            <template slot-scope="scope">{{ scope.row.confirm ? '已确认' : '未确认' }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="240">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="advice(scope.row)">诊断报告</el-button>
                                <el-button type="primary" size="mini" icon="el-icon-warning-outline" @click="callPolice(scope.row)">确认诊断</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination
                    small
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
                <div class="bottom_border"></div>
            </div>
        </div>
        <div class="right" id="pdfDom" ref="imageTofile" style="background: #0d1830" v-if="isShow">
            <i class="el-icon-circle-close" @click="isShow = false"></i>
            <div class="main">
                <div class="tabs">
                    <p style="font-size:18px">异常描述</p>
                    <img src="../assets/img/mg427.png" alt="">
                    <el-button class="export" type="primary" size="mini" @click="downloadPdf()">导出</el-button>
                </div>
                <div class="why">
                    <div class="content">
                        <div class="contents">
                            <div class="topTitle">
                                <div class="item one">报警触发时间</div>
                                <div class="item">报警内容</div>
                            </div>
                            <div class="topCent">
                                <p class="item one">{{newItem.create_date}}</p>
                                <p class="item">{{newItem.title}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tabs" style="margin-left:0px">
                    <p style="font-size:18px">一、设备基本参数</p>
                </div>
                <div class="subtitle">极Ⅰ低端阀冷系统的基本参数信息如下表所示:</div>
                <div class="why">
                    <div class="content">
                        <div class="contents">
                            <div class="topTitle">
                                <div class="item two">生产厂家</div>
                                <div class="item">{{config.parameterInfo.manufacturerName}}</div>
                                <div class="item two">型号</div>
                                <div class="item">{{config.parameterInfo.model}}</div>
                            </div>
                            <div class="topTitle">
                                <div class="item two">投运时间</div>
                                <div class="item">{{config.parameterInfo.time}}</div>
                                <div class="item two">额定冷却容量</div>
                                <div class="item">{{config.parameterInfo.coolingCapacity}}</div>
                            </div>
                            <div class="topTitle">
                                <div class="item two">额定进阀流量</div>
                                <div class="item">{{config.parameterInfo.intoValveFlow}}</div>
                                <div class="item two">额定进阀温度</div>
                                <div class="item">{{config.parameterInfo.intoValveTemperature}}</div>
                            </div>
                            <div class="topTitle">
                                <div class="item two">冷却方式</div>
                                <div class="item">{{config.parameterInfo.way}}</div>
                                <div class="item two">冷却介质</div>
                                <div class="item">{{config.parameterInfo.medium}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tabs" style="margin-left:0px">
                    <p style="font-size:18px">二、系统自动诊断内容</p>
                </div>
                <div class="tabs active">
                    <p>故障内容</p>
                </div>
                <div class="why">
                    <div class="content">
                        {{newItem.title}}
                    </div>
                </div>
                <div class="tabs active">
                    <p>故障原因</p>
                </div>
                <div class="why">
                    <div class="content">
                        {{newItem.reason}}
                    </div>
                </div>
                <div class="tabs active">
                    <p>处理建议</p>
                </div>
                <div class="why">
                    <div class="content">
                        {{newItem.solution}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getAlarmList, alarmConfirm, alarmRemove,downloadPdf } from "../assets/api/api"
export default {
    data(){
        return {
            newItem:{},
            monitorList:[],
            currentPage: 0,
            total:0,
            pageSize:0,
            isShow:false,
            searchInput:'',
            multipleSelection:[],
            name:'极Ⅰ低端阀冷系统'
        }
    },
    mounted(){
        this.dataList()
        let config = window.localStorage.getItem('config')
        if(config){
            this.name = JSON.parse(config).systemName
        }
        setInterval(() => {
            
            config = window.localStorage.getItem('config')
            if(config){
                this.name = JSON.parse(config).systemName
            }
        }, 2000)
    },
    computed:{
        iframeSrc(){
            // const modelUrl = window.location.protocol +window.location.host + '/'
            return `${this.config.modelUrl}NC/s3/?access_token=${this.config.token}`
        },
        config(){
            const config = window.localStorage.getItem('config')
            return config ? JSON.parse(config) : {}
        }
    },
    watch:{
        name(val){
            if(val){
                this.dataList()
            }
        }
    },
    methods: {
        downloadPdf(){
            const params = {
                token:this.config.token,
                alarmId:this.newItem.id,
                project:'泰州±800kV特高压换流站',
                company:'国网江苏电力公司检修公司',
                device:this.name
            }
            downloadPdf(params, (res) => {
                if(res){
                    this.$message({
                        message: '文件导出成功',
                        type: 'success'
                    })
                }
            })
        },
        getTimes(time){
            let b = time.split('.')
            return b[0]
        },
        alarmRemoveData(){
            if(this.multipleSelection.length === 0){
                this.$message({
                    message: '请勾选最少一条信息',
                    type: 'warning'
                })
                return
            }
            let ids = ''
            for(const item of this.multipleSelection){
                ids += `${item.id},`
            }

            const params = {
                ids:ids,
                token:this.config.token
            }
            alarmRemove(params, (res) => {
                if(res.code === 200){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.dataList()
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        callPolice(item){
            if(item.confirm){
                return
            }
            const params = {
                id:item.id,
                token:this.config.token
            }
            alarmConfirm(params, (res) => {
                if(res.code === 200){
                    this.$message({
                        message: '报警成功',
                        type: 'success'
                    })
                    this.dataList()
                }
            })
        },
        getTime(time){
             let b = time.split('.')
            return b[0]
        },
        advice(item) {
            this.newItem = item   
            this.isShow = true         
        },
        dataList(type){
            if(type === 1){
                this.currentPage = 1
                this.pageSize = 1
            }
            const params = {
                type: 'warning',
                token:this.config.token,
                page:this.currentPage,
                keyword:this.searchInput
            }
            getAlarmList(params,(res) => {
                if(res.code === 200){
                    this.monitorList = res.data.alarmList
                    this.total = res.data.total
                    this.pageSize = res.data.count
                }
            })
        },
        handleSizeChange(val) {
            this.currentPage = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.dataList()
        },
        getSubmin(){
            this.currentPage = 1
            this.dataList()
        }
    },
}
</script>
<style lang="less">
.failure{
    .el-pagination{
        margin:20px 0;
    }
    .el-pagination button:disabled,
    .el-pagination__jump,
    .el-pagination--small .btn-next, .el-pagination--small .btn-prev, .el-pagination--small .el-pager li, .el-pagination--small .el-pager li.btn-quicknext, .el-pagination--small .el-pager li.btn-quickprev, .el-pagination--small .el-pager li:last-child{
        background: none;
        color: #FFFFFF;
    }
    .el-pager li.active{
        color: #409EFF;
        cursor: default;
    }
    .el-table--scrollable-y .el-table__body-wrapper{
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            background   : #5273E0;
        }
        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background   : #164C7E;
        }
    }
}
</style>
<style lang="less" scoped>
.small{
    .list.top{
        height: 277px;
    }
    .searchHeader{
        display: none !important;
    }
}
.list.top{
    overflow: auto;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #5273E0;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #164C7E;
    }
}
.btnTitle{
    height: 40px;
    display: flex;
    border-radius: 3px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    background: #072241 !important;
}
.failure{
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .left{
        width: 100%;
        height: 100%;
        border-right: 10px solid #0d1830;
        text-align: center;
        padding-left: 10px;
        .infos{
            border-top: 1px solid #164C7E;
            border-bottom: 1px solid #164C7E;
            position: relative;
            .top_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    top: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    top: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .bottom_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .list{
                margin: 0px 10px;
                padding: 10px 10px;
                background: rgba(22,76,126,0.2);
                .item{
                    min-height: 35px;
                    display: flex;
                    border-radius: 3px;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 10px;
                    color: #FFFFFF;
                    &:nth-child(odd){
                        background: rgba(22,76,126,0.1);
                    }
                }
            }
        }
        .infos{
            .item{
                p{
                    width: 33.33%;
                    text-align: left;
                    &:nth-last-child(1){
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .right{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #0d1830;
        padding: 80px 5% 0;
        z-index: 1;
        .el-icon-circle-close{
            position: absolute;
            top: 20px;
            right: 40px;
            font-size: 30px;
            color: #ffffff;
        }
        .title{
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            .download{
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #164C7E;
                size: 14px;
                border-radius: 3px;
                &:hover,&:active,&.active{
                    color: #8DCFF8;
                }
            }
            .tab{
                width: 100%;
                height: 40px;
                display: flex;
                position: relative;
                p{
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 10px;
                    background: #164C7E;
                    size: 16px;
                    color: #5273E0;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 3px;
                        &:hover,&:active,&.active{
                            color: #8DCFF8;
                        }
                    }
                .full{
                    padding-right: 10px;
                    img{
                    width: 30px;
                    height: 30px;
                    }

                }
            }
            
            }
        .tabs{
            color: #8DCFF8;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 10px;
            margin-bottom: 20px;
            .export{
                position: absolute;
                top: 0;
                right: 0;
            }
            img{
                width: 43px;
                margin-left: 10px;
            }
            &.active::before{
                position: absolute;
                content: '';
                width: 3px;
                height: 60%;
                top: 20%;
                left: 0;
                background: #8DCFF8;
            }
        }
        .why,.plan,.infos{
            margin-bottom: 20px;
            // border-top: 1px solid #164C7E;
            // border-bottom: 1px solid #164C7E;
            position: relative;
            .top_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    top: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    top: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .bottom_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .list{
                margin: 0px 10px;
                padding: 10px 10px;
                background: rgba(22,76,126,0.2);
                .item{
                    height: 30px;
                    display: flex;
                    border-radius: 3px;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 10px;
                    color: #FFFFFF;
                    &:nth-child(odd){
                        background: rgba(22,76,126,0.1);
                    }
                }
            }
        }
        .infos{
            margin-top: 50px;
            .item{
                p{
                    width: 33.33%;
                    text-align: center;
                    &:nth-last-child(1){
                        cursor: pointer;
                    }
                }
            }
        }
        .why,.plan{
            .content{
                margin: 25px 10px;
                color: #FFFFFF;
                font-size: 14px;
            }
        }
    }
    .searchHeader{
        display: flex;
        justify-content: space-between;
        margin: 10px 25px 10px 10px
    }
    .content{
        .contents{
            width: 100%;
            border-top: 1px solid #164C7E;
            border-left: 1px solid #164C7E;
            .topTitle,.topCent{
                display: flex;
                .item{
                    min-height: 30px;
                    line-height: 30px;
                    flex: 1;
                    text-align: center;
                    border-bottom: 1px solid #164C7E;
                    border-right: 1px solid #164C7E;
                    &.one{
                        max-width: 220px;
                        min-width: 220px;
                    }
                    &.two{
                        max-width: 220px;
                        min-width: 220px;
                    }
                }
            }
        }
        
    }
    .main{
        height: 100%;
        overflow: auto;
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            background   : #5273E0;
        }
        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background   : #164C7E;
        }
    }
    .subtitle{
        color: #8DCFF8;
        font-size: 12px;
        margin-left: 8px;
    }
}
</style>
